<template>
  <div class="image-content">
    <template v-if="images.loading">
      <a-spin />
    </template>
    <template v-else-if="images.list.length">
      <a-card
        v-for="item in images.list"
        :key="item.id"
        :hoverable="true"
        :title="item.filename"
        @mouseover="selectedCard = item"
        @mouseleave="selectedCard = null"
      >
        <template #extra v-if="selectedCard === item">
          <MinusCircleOutlined @click="deleteImage(item)" />
        </template>
        <img :src="item.body" @click="queryOriginImg(item)" />
      </a-card>
    </template>
    <a-result v-else title="暂无数据"> </a-result>

    <!--查看大图弹窗-->
    <a-modal
      class="origin-modal"
      v-model:open="originModal.open"
      width="65%"
      :closable="false"
      :footer="null"
    >
      <div class="content">
        <a-image :src="originModal.originBody"> </a-image>
        <div class="tag-groups">
          <a-tag v-for="item in originModal.categories" :key="item.id" color="green">
            {{ item.label }}
          </a-tag>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, reactive, ref } from 'vue'
import { ipcApiRoute } from '@/api/router'
import { arrayBuffer2Base64 } from '@/utils/file'
import { message } from 'ant-design-vue'
import { MinusCircleOutlined } from '@ant-design/icons-vue'
import type { IFile } from '@/types/file'
import type { ICategory } from '@/types/category'
import { Modal } from 'ant-design-vue'
import { emitter, ipc } from '@/core'

let categoryList = ref<ICategory[]>([])
emitter.on('updateCategories', (categories) => {
  categoryList.value = categories as ICategory[]
})

onBeforeUnmount(() => {
  emitter.off('updateCategories')
})

const emit = defineEmits(['callback'])
const selectedCard = ref()

// 查询图片列表
const images = reactive<{
  loading: boolean
  list: IFile[]
}>({
  loading: false,
  list: [],
})

/**
 * 查询所有的文件
 * @param filename
 * @param category
 */
const queryImages = (filename?: string, category?: string) => {
  images.list = []
  images.loading = true

  const oParams: any = {
    filename,
    tags: category === 'all' ? null : category,
  }
  let rParams: any = {}
  Object.keys(oParams)
    .filter((key) => oParams[key])
    .forEach((key) => {
      rParams[key] = oParams[key]
    })
  ipc
    .invoke(ipcApiRoute.getFile, rParams)
    .then((res: any) => {
      if (res.code === 200) {
        const result = res.result ?? []
        result.forEach(async (item: IFile) => {
          const base64 = arrayBuffer2Base64(item.thumbnail)
          images.list.unshift({ ...item, body: base64 })
        })
      }
    })
    .finally(() => {
      images.loading = false
    })
}

queryImages()

/**
 * 查询原图
 */
const originModal = reactive<{
  open: boolean
  title: string
  originBody: string
  categories: ICategory[]
}>({
  open: false,
  title: '',
  originBody: '',
  categories: [],
})
const queryOriginImg = (f: IFile) => {
  originModal.open = true
  originModal.title = f.filename
  originModal.originBody = 'data:image/jpg;base64,' + f.originBody
  originModal.categories = categoryList.value.filter((item: ICategory) => f.tags.includes(item.id))
}
/**
 * 删除图片
 * @param file
 */
const deleteImage = (file: IFile) => {
  Modal.confirm({
    title: '确认要删除当前图片吗?',
    onOk() {
      ipc
        .invoke(ipcApiRoute.deleteFile, {
          id: file.id,
        })
        .then((res: any) => {
          if (res.code === 200) {
            message.success('删除文件成功!')
            emit('callback')
          } else {
            message.error('删除文件失败！')
          }
        })
    },
  })
}

defineExpose({ queryImages })
</script>

<style scoped lang="less">
.image-content {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  ::v-deep(.ant-card) {
    display: inline-block;
    width: 300px;
    height: 300px;
    margin: 5px;
    background: var(--color-background);
    border-color: var(--color-border-default);
    &.ant-card-hoverable:hover {
      border-color: var(--color-border);
      .ant-card-head {
        border-bottom-color: var(--color-border);
      }
    }
    .ant-card-head {
      padding: 10px;
      min-height: unset;
      border-bottom-color: var(--color-border-default);
      .ant-card-extra {
        color: var(--color-remove);
      }
    }
    .ant-card-body {
      padding: 0;
      padding-top: 1px;
      height: calc(100% - 45px);
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
  }
  .ant-result {
    margin: 0 auto;
    margin-top: 25vh;
  }
}
</style>
<style lang="less">
.origin-modal {
  .ant-modal-content {
    padding: 10px 15px;
    background: var(--color-background);
  }
  .ant-modal-body {
    height: 75vh;
    .content {
      height: 100%;
      display: flex;
      .ant-image {
        width: calc(90% - 10px);
        margin-right: 10px;
      }
      .tag-groups {
        width: 10%;
        .ant-tag {
          margin: 5px 0;
        }
      }
    }
  }
}
.ant-image-preview-root .ant-image-preview-content {
  height: 100vh;
}
</style>
